package net.osin.playscalajs.jquery

import com.thoughtworks.binding.Binding
import org.lrng.binding.html
import com.thoughtworks.binding.Binding.{SingleMountPoint, Var}
import org.scalajs.dom.raw.Event
import net.osin.playscalajs.semantic.SemanticUI.jq2semantic

import scala.scalajs.js.Dynamic.literal
import org.scalajs.dom.html.{Div, Input}
import org.querki.jquery._

object View {
  private val count = Var(25)

  private val input = Var("")

  val addCount =
  {
    event: Event =>
      count.value += 10
      if(count.value>100) {
        count.value = 100
        println("is over 100")
      }
      progress
  }
  val subCount =
  {
    event: Event =>
      count.value -= 10
      if(count.value<0) {
        count.value = 0
        println("is down 0")
      }
      progress
  }

  def progress=$("#example1").progress(literal(percent = count.value))

  def dropdown= $(".ui.dropdown").dropdown(literal(on="hover",clearable= true))

  def mounted(): Unit =
  {
    progress
    dropdown
  }


  @html def render:Binding[Div] = {
    <div>
      <div class="ui indicating progress" data:data-percent={count.bind.toString} id="example1">
        <div class="bar"></div>
      </div>
      <p>
        <button class="tiny ui positive basic button" onclick={subCount}>-</button>
        <span>{count.bind.toString}</span>
        <button class="tiny ui positive basic button" onclick={addCount}>+</button>
    </p>



      <div class="ui selection dropdown">
        <input type="hidden" name="gender"  onchange={ event: Event => input.value= event.currentTarget.asInstanceOf[Input].value }/>
        <i class="dropdown icon"></i>
        <div class="default text">Gender</div>
        <div class="menu">
          <div class="item" data:data-value="Male">Male</div>
          <div class="item" data:data-value="Female">Female</div>
        </div>
      </div>
      the selected value is { input.bind }
    </div>
  }
}
